<template>
  <div>
    <div style="margin-top: 20px">
      <a-form
        layout="inline"
        :model="selectData"
        :label-col="{ style: { width: '60px' } }"
        :wrapper-col="{ style: { width: '250px' } }"
      >
        <a-form-item label="标题">
          <a-input v-model:value="selectData.title" />
        </a-form-item>
        <a-form-item label="详情">
          <a-input v-model:value="selectData.introduce" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="Fun.handleSearch">搜索</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div>
      <a-table
        :scroll="{ x: 1500, y: 300 }"
        :pagination="false"
        :columns="columns"
        :data-source="list"
        bordered
      >
      </a-table>
      <a-pagination
        showQuickJumper
        showSizeChanger
        :pageSize="selectData.pagesize"
        :current="selectData.page"
        @change="Fun.handleTableChange"
        @showSizeChange="Fun.handleTableChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { goodsList } from "@/api/api";
import { initData } from "../type/good";
export default defineComponent({
  setup() {
    const data = reactive(new initData());
    class Class {
      getGoodsList() {
        goodsList().then((res) => {
          data.list = res.data;
        });
      }
      handleTableChange(pageNo: number, pageSize: number) {
        data.selectData.page = pageNo;
        data.selectData.pagesize = pageSize;
      }
      handleSearch() {}
    }
    const Fun = new Class();
    onMounted(() => {
      Fun.getGoodsList();
    });
    // watch(
    //   "data.selectData.title":(newValue, oldValue) => {
    //     console.log("值发生了变更", newValue, oldValue);
    //   },
    //   { deep: true }

    // );
    return {
      ...toRefs(data),
      Fun,
    };
  },
});
</script>

<style scoped></style>
